<template>
    <div class="service_wraper">
        <!-- 导航条 -->
        <Nav />

        <!-- 轮播图 -->
        <!-- <SwiperComponent class="swiper_wraper" /> -->
        <div class="banner_wrap"
            v-if="banners&&banners.length>0"
            :style="{'background': 'url('+$baseImageUrl+banners[0].url+')', 'background-repeat': 'no-repeat', 'background-size': '100% 100%'}">
            <div class="desc" v-if="banners&&banners.length>0" v-html="banners[0].description"></div>
        </div>

        <div class="tabs_wrap">
            <div class="tabs">
                <el-tabs v-model="active" @tab-click="handleClick" >
                    <el-tab-pane
                        v-for="(item, index) in tabs"
                        :key="index"
                        :label="`${item.label}`"
                        :name="item.name"
                    >
                        <component v-if="item.show" :is="item.component" :params="item.params"></component>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <!-- 底部footer -->
        <Footer />

    </div>
</template>
<script>
import SwiperComponent from '@/views/swiper_component/index'
import Nav from '@/views/nav/index'
import Footer from '@/views/footer/index'
import HYJJFA from '@/views/service/HYJJFA'
import RJYYKF from '@/views/service/RJYYKF'
import XTJCFW from '@/views/service/XTJCFW'
import YXWHFW from '@/views/service/YXWHFW'
import SZJSFW from '@/views/service/SZJSFW'
import { getStore } from '@/libs'
export default {
    name: "index",
    components: {
        Nav,
        SwiperComponent,
        Footer,
        HYJJFA,
        RJYYKF,
    },
    data() {
        return {
            params: null,

            active: "HYJJFA",
            tabs: [
                {
                    label: this.$t('p3.tab.t1'),
                    name: "HYJJFA",
                    show: true,
                    component: HYJJFA,
                    count: 0,
                    params: {tab: 'HYJJFA'}
                },
                {
                    label: this.$t('p3.tab.t2'),
                    name: "RJYYKF",
                    show: false,
                    component: RJYYKF,
                    count: 0,
                    params: {tab: 'RJYYKF'}
                },
                {
                    label: this.$t('p3.tab.t3'),
                    name: "SZJSFW",
                    show: false,
                    component: SZJSFW,
                    count: 0,
                    params: {tab: 'SZJSFW'}
                },
                {
                    label: this.$t('p3.tab.t4'),
                    name: "XTJCFW",
                    show: false,
                    component: XTJCFW,
                    count: 0,
                    params: {tab: 'XTJCFW'}
                },
                {
                    label: this.$t('p3.tab.t5'),
                    name: "YXWHFW",
                    show: false,
                    component: YXWHFW,
                    count: 0,
                    params: {tab: 'YXWHFW'}
                }
            ],

            banners: []
        }
    },



    created() {
        this.params = this.$route.query


        this.active = this.params.tab

        this.tabs.forEach(item => {
            if(item.name === this.active) {
                item.show = true
            } else {
                item.show = false
            }
        });

        this.getBanner()


    },
    mounted() {
        this.$nextTick(() => {
            this.tabs[0].label=this.$t('p3.tab.t1')
            this.tabs[1].label=this.$t('p3.tab.t2')
            this.tabs[2].label=this.$t('p3.tab.t3')
            this.tabs[3].label=this.$t('p3.tab.t4')
            this.tabs[4].label=this.$t('p3.tab.t5')
        })
    },
    methods: {
        /**
         * 获取Banner
         */
         async getBanner() {
            let terminal = 2
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            const res = await this.$http({
                url: '/api/siteswiper/list',
                method: 'GET',
                params: {cate: 4, terminal, country}
            })
            if (this.ResultMessage(res, false)) {
                if(res.data) {
                    this.banners = res.data
                }
            }
        },
        handleClick(tab) {
            /**
             * 每次换tab的时候，子组件的mounted()函数都会被触发4次。
             * 这是因为每次我们按tab的时候，都有4个子组件被渲染。
             * 所以我们要用v-if来选择渲染的组件。
             */
            this.tabs.forEach(item =>
                item.name === tab.name
                    ? (item.show = true)
                    : (item.show = false)
            );
        },
    }
};
</script>


<style lang="scss" scope>
@import './index';
</style>
